<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户登录</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
</head>
<body>
<h2 style="color:red">${requestScope.error}</h2>
<form action="${pageContext.request.contextPath}/login" method="post">
    <label for="username">名字：</label>
    <input id="username" type="text" name="name" placeholder="请输入用户名"><br/>

    <label for="password">密码：</label>
    <input id="password" type="password" name="password" placeholder="请输入密码"><br/>

    <label for="code">验证码：</label>
    <input id="code" type="text" name="code" placeholder="请输入验证码"><br/>

    <img src="${pageContext.request.contextPath}/captcha" alt="验证码" id="captcha"><br/>

    <input type="submit" value="登录">

    <hr/>
    <button class="btn btn-primary" onclick="sendAjax();">发送JSON数据</button>

    <script>
        $(function () {
            var src = $("#captcha").attr("src");
            $("#captcha").click(function () {
                // 验证码地址后拼接参数作用：防止浏览器缓存图片
                $(this).attr("src", src+"?v=" + new Date().getTime());
            });
        });
        function sendAjax() {
            // 发送ajax请求
            var user = {username: "admin", password: "11111"};
            $.ajax({
                url: "http://localhost:8080/json/test6",
                contentType: "application/json",
                type: "post",
                data: JSON.stringify(user),
                success: function (result) {
                    console.log(result);
                    alert(result);
                }
            });
        }
    </script>
</form>
</body>
</html>
